<template>
    <div class="top-middle-cmp">
      <dv-charts :option="option" />
    </div>
  </template>
  
  <script>
  export default {
    name: 'TopMiddleCmp',
    data () {
      return {
        option: {
          legend: {
            data: ['sonarQube-BUG报告'],
            textStyle: {
              fill: '#fff'
            }
          },
          xAxis: {
            data: [
              '06/30', '07/09', '07/16', '07/23', '07/30', '08/06',
              '08/12', '08/13', '08/15', '08/18', '08/25', '08/28',
              '08/31', '09/01', '09/03', '09/07'
            ],
            boundaryGap: false,
            axisLine: {
              style: {
                stroke: '#999'
              }
            },
            axisLabel: {
              style: {
                fill: '#999'
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            data: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              style: {
                stroke: '#999'
              }
            },
            axisLabel: {
              style: {
                fill: '#999'
              },
              formatter ({ value }) {
                return value.toFixed(2)
              }
            },
            axisTick: {
              show: false
            },
            min: 0,
            max: 40,
            interval: 5
          },
          series: [
            {
              data: [
                22, 19, 19, 20, 20, 21,
                3, 3, 3, 3, 3, 3,
                3, 7, 7, 7
              ],
              type: 'line',
              name: 'sonarQube-BUG报告',
              smooth: true,
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              },
              linePoint: {
                radius: 4,
                style: {
                  fill: '#00db95'
                }
              }
            }
          ]
        }
      }
    }
  }
  </script>
  
  <style lang="less">
  .top-middle-cmp {
    display: flex;
    justify-content: space-between;
    height: 40%;
  }
  </style>
  